<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>归还</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/back.css">
  <link rel="stylesheet" href="css/dropload.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="header-box">
  <p>归还</p>
</div>
<div class="back_title">
  <div class="back_title_box">
    <img src="img/back/huiben2@2x.png">
    <span><i id="totalCount">0</i> 待还</span>
  </div>
</div>
<div class="back_list">
  <div class="back_list_box">
    <ul id="back_list_box">
<!--       <li> -->
<!--         <b></b> -->
<!--         <img src="img/index/tuceng 32@2x.png"> -->
<!--         <div class="box_right"> -->
<!--           <p> 牙虫大搬家 </p> -->
<!--           <p>(日)西本康子</p> -->
<!--           <p class="daoqi"><img src="img/back/daoqi@2x.png">到期:<i>2018-06-01</i></p> -->
<!--           <p class="didian"><img src="img/back/didian@2x.png"><i>回龙观创客广场B座......</i></p> -->
<!--           <div class="comment"> -->
<!--             <a href="damageReport.html?id=12&tp=0">损坏上报</a> -->
<!--             <a href="damageReport.html?id=36&tp=1">评价</a> -->
<!--           </div> -->
<!--         </div> -->
<!--       </li> -->
<!--       <li> -->
<!--         <b></b> -->
<!--         <img src="img/index/tuceng 30@2x.png"> -->
<!--         <div class="box_right"> -->
<!--           <p> 鸭子骑车记 </p> -->
<!--           <p>(美)大卫·香农</p> -->
<!--           <p class="daoqi"><img src="img/back/daoqi@2x.png">到期:<i>2018-06-01</i></p> -->
<!--           <p class="didian"><img src="img/back/didian@2x.png"><i>回龙观创客广场B座......</i></p> -->
<!--           <div class="comment"> -->
<!--             <a href="damageReport.html?id=78&tp=0">损坏上报</a> -->
<!--             <a href="damageReport.html?id=45&tp=1">评价</a> -->
<!--           </div> -->
<!--         </div> -->
<!--       </li> -->
<!--       <li> -->
<!--         <b></b> -->
<!--         <img src="img/index/tuceng 31@2x.png"> -->
<!--         <div class="box_right"> -->
<!--           <p> 胆小鬼威利 </p> -->
<!--           <p>(英)安东尼·布朗</p> -->
<!--           <p class="daoqi"><img src="img/back/daoqi@2x.png">到期:<i>2018-06-01</i></p> -->
<!--           <p class="didian"><img src="img/back/didian@2x.png"><i>回龙观创客广场B座......</i></p> -->
<!--           <div class="comment"> -->
<!--             <a href="damageReport.html?id=51&tp=0">损坏上报</a> -->
<!--             <a href="damageReport.html?id=11&tp=1">评价</a> -->
<!--           </div> -->
<!--         </div> -->
<!--       </li> -->
<!--       <li> -->
<!--         <b></b> -->
<!--         <img src="img/index/tuceng 35@2x.png"> -->
<!--         <div class="box_right"> -->
<!--           <p> 根本就不脏嘛 </p> -->
<!--           <p>(德)玛努艾拉·欧尔特</p> -->
<!--           <p class="daoqi"><img src="img/back/daoqi@2x.png">到期:<i>2018-06-01</i></p> -->
<!--           <p class="didian"><img src="img/back/didian@2x.png"><i>回龙观创客广场B座......</i></p> -->
<!--           <div class="comment"> -->
<!--             <a href="damageReport.html?id=21&tp=0">损坏上报</a> -->
<!--             <a href="damageReport.html?id=12&tp=1">评价</a> -->
<!--           </div> -->
<!--         </div> -->
<!--       </li> -->
    </ul>
  </div>
</div>
<div class="footer_kb"></div>
<div class="footer_kb1"></div>
<div class="chose_back">
  <div class="chose_back_box" id="chose_back_box">
    <a href="#" id="hrefXujie" >续借</a>
    <a href="#" id="hrefGuihuan"  class="back_select">归还</a>
  </div>
</div>
<div class="footer">
  <div class="footer_box">
    <a class="hui_ben footer_box_item" href="index.html">
      <img src="img/index/huiben1@2x.png">
      <span>绘本</span>
    </a>
    <a class="rong_yao_bang footer_box_item" href="deving.html">
      <img src="img/index/rongyaobang@2x.png">
      <span>荣耀榜</span>
    </a>
    <a class="zhu_ye footer_box_item" href="scanRead.html">
      <img src="img/index/zhuye@2x.png">
      <span>扫一扫</span>
    </a>
    <a class="gui_huan footer_box_item select" href="back.html">
      <img src="img/index/guihuan1@2x.png">
      <span>归还</span>
    </a>
    <a class="my footer_box_item" href="my.html">
      <img src="img/index/wo@2x.png">
      <span>我享</span>
    </a>
  </div>
</div>
</body>
<script id="book_show_tmpl" type="text/x-jsrender">
{{if #data.book != null}}
<li id="{{:id}}" >
<b class="back_active"></b>
<input class="stockId" type="hidden" value="{{:bid}}">
        <div class="divImg"><img src="{{:#data.book.bookImage1}}"></div>
		<div class="box_right">
		<p class="bookName">{{:#data.book.bookName}}</p>
		<p>作者：{{:#data.book.author}}</p>
		<p>主题：<i>{{:#data.book.classificationName}}</i></p>
          <p class="daoqi">到期：<i class="borrowEndTime">{{:borrowEndTime}}</i></p>
          <p class="didian">借阅点：<i>{{:borrowPName}}</i></p>
          <!--<div class="comment">
            <a href="damageReport.html?id=21&tp=0">损坏上报</a>
            <a href="damageReport.html?id=12&tp=1">评价</a>
          </div>-->
        </div>
      </li>
{{/if}}
</script>
<!-- <p class="daoqi"><img src="img/back/daoqi@2x.png">到期:<i>{{:borrowEndTime}}</i></p> -->
<!-- <p class="didian"><img src="img/back/didian@2x.png"><i>{{:borrowPName}}</i></p> -->

<script src="js/jquery.js"></script><script src="js/jquery.cookie.js"></script>
<script src="js/base.js?v=base.js?v=20180102"></script>
<script src="js/jsrender.js"></script>
<!-- <script src="js/dropload.min.js"></script> -->
<script>
var pageNum = 1;
var pageSize = 20;

$(document).on("click",'#back_list_box li',function() {
	if (!$(this).find("b").hasClass("back_active")) {
		$(this).find("b").attr('class', 'back_active');
	} else {
		$(this).find("b").attr('class', '');
	}
});

loadData();
function loadData(){
	// 获取当前用户下面的借阅信息
	$.get({
		url : window.baseUrl + "/api/book/borrowReturnLog/findPage",
		data : {
			"uid" : getUserId(),
			"state" : 1,
			"pageNum" : pageNum,
			"pageSize" : pageSize
		},
		success : function(data) {
			var data = data.data.list;
			$("#totalCount").text(data.length);
			$("#back_list_box").empty();
			var htmlOutput = $.templates("#book_show_tmpl").render(data);
			$("#back_list_box").html(htmlOutput);
		}
	});
}

// 续借
$(document).on('click', '#hrefXujie', function() {
	// 借阅信息里面的库存id
	var ids = [];
	var arr = $(".back_active").next("input");
	arr.each(function(i,itme){
		ids.push($(this).val());
	});
	// 添加到购物车结算
	if(ids.length < 1){
		alert("请选择要续借的绘本！");
		return;
	}
	var userId = getUserId();
	
	$.ajax({
		url : window.baseUrl + "/api/book/bookCart/create",
		type: "Post",
		data : JSON.stringify({
			uid : userId,
			bids : ids.join(),
			cartType : "renew",
			borrowWeeks : 1
		}),
		contentType : "application/json",
		success : function(data) {
			window.location.href = "/scanRead.html?type=renew";//因为我这边是扫描后有个链接，然后跳转到该页面
		}
	});
});


// 归还
$(document).on('click', '#hrefGuihuan', function() {
	var ids = [];
	var names = [];
// 	var length = $(this).children('li').length;
// 	if(length==0){
// 		  alert("您没有要归还的绘本！");
// 		  return;
// 	  }
	
	var arr = $(".back_active").parents("li");
	arr.each(function(i,itme){
		var bookName = $(this).find(".bookName").text();
		var borrowEndTime = $(this).find(".borrowEndTime").text().replace("T", " ");
		var guoqiDay = Math.ceil(((new Date()) - (new Date(borrowEndTime)))/(1000*3600*24));
		/* 
		//暂时不收预期费用
		if(guoqiDay > 3){
			alert("已过期超过3天，请先续费再归还！");
			return;
		} */
		names.push(bookName);
		ids.push($(this).attr("id"));
	});
	var namesUrl = encodeURI(encodeURI(names));
	var ids = ids.join();
	 if(ids == null || ids == ""){
		 alert("您没有要归还的绘本！");
		  return;
	  }
	window.location.href = "backAddress.html?ids="+ids+"&names=" + namesUrl;
});

/* var dropload = $('.back_list').dropload({
	domDown : {
        domClass   : 'dropload-down',
        domRefresh : '<div class="dropload-refresh">下面暂无数据</div>',
    },
    scrollArea : window,
    autoLoad: false,
    loadDownFn : function(me){
    	 pageNum+=1;
    	 loadData();
    	 me.resetload();
    }
});	 */
</script>
</html>